<!--
 * @Author: chunlai
 * @Date: 2024-09-25 10:00:44
 * @LastEditTime: 2025-02-08 10:29:39
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\form\components\InsEffectiveDate.vue
 * @Description: 保险生效起/止期选择
-->
<template>
  <div>
    <!-- <div class="topSec">
      <div class="ftw5 tit"><span class="tag"></span>保险生效日期</div>
      <div class="flex_ac"></div>
    </div> -->
    <div class="insuPlan">
      <div class="cell3_main">
        <div class="cell3Item">
          <div class="cell3_label">起保日期</div>
          <div class="cell3_value" @click="changeStartDate">
            {{ formData.effectiveDate }} 00:00:00
            <van-icon
              name="arrow"
              class="ml4"
              size="16"
              v-if="startDateDiff > -1"
            />
          </div>
        </div>
      </div>
      <div class="cell3_main">
        <div class="cell3Item">
          <div class="cell3_label">终保日期</div>
          <div class="cell3_value">{{ formData.expiryDate }} 23:59:59</div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="showPicker"
      overlay-class="lay1_shark"
      position="bottom"
    >
      <van-datetime-picker
        :min-date="minDate"
        :max-date="maxDate"
        type="date"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getStartDate,
  getEndDate,
  dateToString,
  getAfterDay,
} from "@/methods/date.js";
export default {
  name: "InsEffectiveDate",
  components: {},
  data() {
    return {
      showPicker: false,
      minDate: "",
      maxDate: "",
      formData: {
        effectiveDate: "",
        expiryDate: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      beginInsDay: "page/beginInsDay",
      startDateDiff: "page/startDateDiff",
      inputReg: "infoReg/inputReg",
      payInfo: "insert/payInfo",
    }),
    infoReg() {
      return JSON.parse(JSON.stringify(this.inputReg.payInfo));
    },
  },
  watch: {},
  created() {
    Object.keys(this.formData).map((key) => {
      if (this.payInfo.hasOwnProperty(key)) {
        this.formData[key] = this.payInfo[key];
      }
    });
    const beginDay = getStartDate(this.beginInsDay);
    if (this.formData.effectiveDate == "") {
      this.formData.effectiveDate = beginDay;
      this.updateValue();
    }
    if (this.startDateDiff > -1) {
      this.minDate = new Date(beginDay);
      const nowDay = dateToString(new Date());
      this.maxDate = new Date(
        getAfterDay(nowDay, this.startDateDiff || 30, "D")
      );
    }
    // console.log(getEndDate("2024-09-28"));
  },
  mounted() {},
  methods: {
    changeStartDate() {
      if (this.startDateDiff == -1) return;
      this.showPicker = true;
    },
    onConfirm(date) {
      this.formData.effectiveDate = dateToString(date);
      this.updateValue();
      this.showPicker = false;
    },
    updateValue() {
      this.formData.expiryDate = getEndDate(this.formData.effectiveDate);
      this.$store.commit("insert/UPDATE_PAYINFO", {
        effectiveDate: this.formData.effectiveDate,
        expiryDate: this.formData.expiryDate,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../style.less";
.insuPlan {
  background-color: #fff;
  border-top: 1px solid #f6f6f6;
  .cell3_main {
    padding: 0 16px;
  }
}
.cell3Item {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  min-height: 40px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #ededed;
    transform: scaleY(0.5);
  }

  .cell3_label {
    display: flex;
    align-items: center;
    width: 80px;
    height: 26px;
    color: #747474;
  }

  .cell3_value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: calc(100% - 90px);
    height: 26px;
  }
}
</style>
